<template>
  <div class="tutorial">
    <div class="tutorial-header">
      <h1>使用教程</h1>
      <p>跟随以下步骤，开始您的AI对话之旅</p>
    </div>

    <el-tabs v-model="activeTab" class="tutorial-tabs">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
        <div class="tutorial-content">
          <el-timeline>
            <el-timeline-item
              v-for="(step, index) in tab.steps"
              :key="index"
              :timestamp="step.title"
              placement="top"
              :type="step.type"
              :color="step.color"
            >
              <el-card>
                <h4>{{ step.title }}</h4>
                <p>{{ step.description }}</p>
                <div v-if="step.image" class="step-image">
                  <el-image :src="step.image" :preview-src-list="[step.image]" />
                </div>
                <div v-if="step.tips" class="step-tips">
                  <el-alert
                    :title="step.tips"
                    type="info"
                    :closable="false"
                    show-icon
                  />
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="faq-section">
      <h2>常见问题</h2>
      <el-collapse>
        <el-collapse-item v-for="(faq, index) in faqs" :key="index" :title="faq.question">
          {{ faq.answer }}
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tutorial',
  data() {
    return {
      activeTab: 'basic',
      tabs: [
        {
          name: 'basic',
          label: '基础教程',
          steps: [
            {
              title: '注册账号',
              description: '点击右上角的"登录"按钮，选择注册新账号，填写相关信息完成注册。',
              type: 'primary',
              color: '#409EFF'
            },
            {
              title: '登录系统',
              description: '使用注册的账号和密码登录系统。',
              type: 'success',
              color: '#67C23A'
            },
            {
              title: '开始对话',
              description: '登录后进入对话界面，在输入框中输入您的问题，点击发送或按回车键即可开始对话。',
              type: 'warning',
              color: '#E6A23C'
            }
          ]
        },
        {
          name: 'advanced',
          label: '进阶技巧',
          steps: [
            {
              title: '提示词优化',
              description: '学习如何编写更好的提示词，获得更准确的回答。',
              type: 'info',
              color: '#909399'
            },
            {
              title: '上下文管理',
              description: '了解如何维持对话上下文，进行连续的深入交流。',
              type: 'info',
              color: '#909399'
            },
            {
              title: '高级功能',
              description: '探索代码生成、文章润色等高级功能的使用方法。',
              type: 'info',
              color: '#909399'
            }
          ]
        }
      ],
      faqs: [
        {
          question: '如何提高AI回答的准确性？',
          answer: '提供清晰、具体的问题描述，必要时可以提供更多上下文信息。'
        },
        {
          question: '对话记录会保存多久？',
          answer: '系统会保存最近30天的对话记录，您可以随时查看和导出。'
        },
        {
          question: '支持哪些编程语言？',
          answer: '系统支持包括Python、JavaScript、Java、C++等在内的多种主流编程语言。'
        },
        {
          question: '如何导出对话记录？',
          answer: '在对话界面右上角的"更多"菜单中，选择"导出对话"即可。'
        }
      ]
    }
  }
}
</script>

<style scoped>
.tutorial {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tutorial-header {
  text-align: center;
  margin-bottom: 40px;
}

.tutorial-header h1 {
  font-size: 36px;
  color: #303133;
  margin-bottom: 10px;
}

.tutorial-header p {
  font-size: 18px;
  color: #606266;
}

.tutorial-tabs {
  margin-bottom: 40px;
}

.tutorial-content {
  padding: 20px;
}

.step-image {
  margin: 15px 0;
}

.step-tips {
  margin-top: 15px;
}

.faq-section {
  margin-top: 40px;
}

.faq-section h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
}
</style> 